<template>
   <div>
    <Card style="min-height: 300px;">
      <div class="btn">
        <span :class="{active:index==1}">近30天入网</span>
        <span :class="{ active: index == 2 }">月底入网</span>
        <span :class="{ active: index == 3}">年度入网</span>

      </div>
      <div id="column" style="height: 280px;width: 100%"></div>
    </Card>
   </div>
</template>
<script setup>
import { ref ,onMounted} from "vue" 
import * as echarts from 'echarts'
import Card from '../card.vue'
const index=ref(1)
var  option = {
    grid: {
      y2: '30',
      x: '50',
      y: '100',
      x2: '15',
    },
    legend: {
      x: '25',
      y: '50',
      itemWidth: 15,
      itemHeight: '10',
      data: [
        {
          name: '已完成',
          textStyle: { fontWeight: 'bold', color: '#e8e8dc', fontSize: '10' },
        },
        {
          name: '未完成',
          textStyle: { fontWeight: 'bold', color: '#e8e8dc', fontSize: '10' },
        },
        {
          name: '完成率',
          textStyle: { fontWeight: 'bold', color: '#0eddfd', fontSize: '10', },
        },
      ]

    },
    title: {
      text: '本年回款完成情况(万元)',
      left: 'center',
      top: 20,
      textStyle: {
        color: '#d9efff'
      }
    },
    xAxis: [
      {
        type: 'category',
        data: ['江宁金茂悦', '进击九月森林', '进击九月森林', '进击九月森林', '进击九月森林', '进击九月森林', '进击九月森林', '进击九月森林', '进击九月森林'],
        axisLabel: {
          show: true,
          interval: 0,
          textStyle: {
            color: '#d2d4da'
          }
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#d2d4da',
            fontSize: '9',
          }
        },
      }
    ],
    yAxis: [
      {
        type: 'value',
        // interval: 50,
        scale: true,
        splitLine: {
          lineStyle: {
            color: '#1f3054'
          },
        },
        axisLabel: {
          textStyle: {
            color: '#d2d4da',
            fontSize: '9',
          }
        },
        axisLine: {
          lineStyle: {
            color: '#1f3054', // 颜色
            width: 1, // 粗细
          }
        }
      },
      {
        type: 'value',
        show: false,
        interval: 1,
        axisLabel: {
          show: true,
          interval: 'auto',
          formatter: '{value} %'
        },

      }
    ],
    series: [
      {
        name: '已完成',
        barWidth: 10,
        borderWidth: '0',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 1,
              color: "#3893e5" // 0% 处的颜色
            },
            {
              offset: 0,
              color: "#00ffff" // 100% 处的颜色
            }], false),
          },
        },
        label: {
          normal: {
            color: '#fff',
            show: true,
            position: 'inside',
            zlevel: '1000',
          }
        },
        data: [98, 68, 100, 40, 30, 68, 100, 40, 20]
      },
      {
        name: '未完成',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          normal: {
            color: '#626262'
          },
        },
        label: {
          normal: {
            color: '#dbdde2',
            show: true,
            position: 'inside'
          }
        },
        data: [100, 100, 100, 100, 100, 100, 100, 100, 100]
      },
      {
        name: '总计',
        type: 'bar',
        stack: '总量',
        label: {
          normal: {
            // offset:['50', '80'],
            show: true,
            position: 'top',
            formatter: '{c}',
            textStyle: { color: '#fff' }
          }
        },
        itemStyle: {
          normal: {
            color: 'rgba(128, 128, 128, 0)'
          }
        },
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0]
      },
      {
        name: '完成率',
        symbol: 'circle',
        symbolSize: 8,
        smooth: true,
        type: 'line',
        yAxisIndex: 1,
        data: [0, 74, 98, 48, 48, 74, 98, 48, 100],
        itemStyle: {
          normal: {
            color: '#0eddfd',
            label: {
              show: true,
              position: "top",
              formatter: '{c}%',
              borderWidth: 10,
              color: '#0eddfd',
              padding: 4,

            },
            labelLine: {
              show: false
            }
          },

        }
      }
    ]
  };
// var series = option["series"];
//         var fun = function (params) { 
//                 var data3 =0;
//                 for(var i=0,l=series.length-1;i<l;i++){
//                     console.log(series[i].data[params.dataIndex])
//                     data3 += series[i].data[params.dataIndex]

//                 }
//                 console.log(data3)
//                 return data3
//             }
//         //加载页面时候替换最后一个series的formatter
//         series[series.length-1]["label"]["normal"]["formatter"] = fun 
//         // 使用刚指定的配置项和数据显示图表。
// if (option && typeof option === "object") {
//     myChart.setOption(option, true);
// }
function numb() {
  const myChart = echarts.init(document.getElementById('column'))

  myChart.setOption(option, true)
}
onMounted(() => {
  numb()
})
</script>

<style scoped lang="css" >
.btn{
  width: 60%;
  display: flex;
  justify-content: space-between;
}
.active{
  padding: 5px ;
  background: linear-gradient(135deg, #117fd7, #07e0fa);
  text-align: center;
  line-height: 1;
  border-radius: 5px;
}
</style>